<script lang="ts" setup>
import { get, post, Message, loadFile } from '@/utils'
import productList from '../SelectModal/Product.vue'
import Draggable from 'vuedraggable'
import useModal from '@/hooks/useModal'
const props = defineProps<{
  val: any[]
}>()
console.log('🚀 ~ props:', props)

const emit = defineEmits(['update:val', 'update:data'])
const { store } = useModal()
const dataList = ref<Product[]>([])
const ids = computed(() => props.val)
const onConfirm = data => {
  emit('update:data', dataList.value)
  emit('update:val', data)
}
const onRemove = index => {
  dataList.value.splice(index, 1)
  emit('update:data', dataList.value)
}
</script>
<template>
  <div style="flex: 2">
    <draggable
      class="draggable grid-3 grid-pd mb10"
      :list="dataList"
      ghost-class="ghost"
      itemKey="id"
      animation="300"
      :force-fallback="true"
      :group="{
        name: 'list',
        pull: false,
      }"
      :fallback-class="true"
      :fallback-on-body="true"
    >
      <template #item="{ element, index }">
        <div class="item">
          <div class="icon" @click="onRemove(index)">
            <icon-close />
          </div>
          <img :src="element.img" />
        </div>
      </template>
    </draggable>
    <a-button long type="primary" @click="store.handleShow({})">选择商品</a-button>
    <productList v-if="store.show" v-model:list="dataList" :default-ids="ids" v-model:show="store.show" type="checkbox" @confirm="onConfirm" />
  </div>
</template>
<style lang="less" scoped>
.item {
  position: relative;
  cursor: move;
  .icon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #e7ebef;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid white;
    padding: 2px;
  }
  img {
    width: 100%;
  }
}
</style>
